<template>
  <view class="w-[100vw]">
    <view
      class="w-[100vw] h-172rpx b-amber b-red"
      style="
        background: linear-gradient(
          180deg,
          rgba(62, 206, 197, 0.85) 0%,
          rgba(38, 188, 198, 1) 100%
        );
        border-bottom-right-radius: 30rpx;
        border-bottom-left-radius: 30rpx;
      "
      @click="toDoctorConsultationRoom"
    >
      <view class="logos">惠生医诊</view>
    </view>
    <view class="put" @click="tzSS">
      <input type="text" placeholder="搜索医生,疾病,健康百科" />
      <wd-icon name="search" size="22px" color="#fff"></wd-icon>
    </view>
    <!-- 金刚区部分 -->
    <view class="Kong">
      <view v-for="(item, index) in kong" :key="item.url" class="cell" @click="Ask(index)">
        <img :src="item.url" alt="" />
        <text class="font-extrabold">{{ item.text }}</text>
        <text class="text-[#848484]">{{ item.title }}</text>
      </view>
    </view>
    <!-- 底部宫格部分 -->
    <view class="Goge">
      <view v-for="item in Gogelist" :key="item.url" class="cells" @click="searchTz(item.text)">
        <img :src="item.url" alt="" />
        <text>{{ item.text }}</text>
      </view>
    </view>
    <!-- 优惠区域 -->
    <wd-swiper
      imageMode="aspectFit"
      customClass="yhimg"
      height="210rpx"
      :list="swiperList"
      autoplay
      :indicator="{ type: 'dots-bar' }"
      @click="tzYhj"
    ></wd-swiper>

    <wd-tabs
      v-model="tabIndex"
      slidable="always"
      auto-line-width
      sticky
      :offset-top="-44"
      @change="handleChange"
    >
      <block v-for="(item, index) in tablist" :key="item">
        <wd-tab :title="item">
          <view v-show="index == tabIndex">
            <KnowledgeList :tab="index" :tabIndex="tabIndex" />
          </view>
        </wd-tab>
      </block>
    </wd-tabs>
  </view>
</template>

<script setup lang="ts">
import KnowledgeList from "./components/KnowledgeList.vue";

interface kong {
  url: string;
  text: string;
  title: string;
}
interface Goge {
  url: string;
  text: string;
}

function tzYhj() {
  uni.navigateTo({ url: "/pages/mine/components/coupon" });
}

function tzSS() {
  uni.navigateTo({
    url: "/pages/AskDoctor/components/doctorSearch",
  });
}

const handleChange = (e: any) => {
  console.log(e, "eee");
};

const tablist = ref<string[]>(["关注", "推荐", "护肤", "减脂", "饮食"]);
const tabIndex = ref<number>(1);
const kong = ref<kong[]>([
  { url: "../../static/h5/ask_doctor@1x.png", text: "问医生", title: "按科室查问医生" },
  { url: "../../static/h5/inquiry_graphic@1x.png", text: "极速问诊", title: "20s医生极速回复" },
  { url: "../../static/deepseek.png", text: "AI问诊", title: "咨询病情更方便" },
]);
const Gogelist = ref<Goge[]>([
  { url: "../../static/h5/drug_order@1x.png", text: "药品订单" },
  { url: "../../static/h5/health_records@1x.png", text: "健康档案" },
  { url: "../../static/h5/my_prescription@1x.png", text: "我的处方" },
  { url: ".../../static/h5/disease_inquiry@1x.png", text: "疾病查询" },
]);
const searchTz = (index: string) => {
  console.log(index);

  switch (index) {
    case "药品订单":
      // uni.navigateTo({ url: "/pages/AskDoctor/index" });
      break;
    case "健康档案":
      uni.navigateTo({ url: "/pages/FamilyArchives/index" });
      break;
    case "我的处方":
      // uni.navigateTo({ url: "/pages/DrugClinic/index" });
      break;
    case "疾病查询":
      uni.navigateTo({ url: "/pages/DiseaseSearch/index" });
      break;
    default:
      break;
  }
};

// 跳转到问医生页面
const Ask = (index: number) => {
  switch (index) {
    case 0:
      uni.navigateTo({ url: "/pages/AskDoctor/index" });
      break;
    case 1:
      uni.navigateTo({ url: "/pages/RapidConsultation/index" });
      break;
    case 2:
      uni.navigateTo({ url: "/pages/DrugClinic/index" });
      break;
    default:
      break;
  }
};

const swiperList = ref([
  "../../static/h5/coupon_banner@1x.png",
  "../../static/h5/coupon_banner@1x.png",
]);

onReachBottom(() => {
  console.log("1");
});

const toDoctorConsultationRoom = () => {
  uni.navigateTo({ url: "/pages/DoctorConsultationRoom/index" });
};
</script>

<style setup lang="scss">
.Kong {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 100vw;
  height: 240rpx;
  margin-top: 40rpx;
}

.cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 230rpx;
  height: 220rpx;
  font-size: 28rpx;
  font-weight: medium;
  line-height: 42rpx;
  color: #121826;
  text-align: left;
  letter-spacing: 0rpx;

  img {
    width: 78rpx;
    height: 80rpx;
  }
}

.put {
  position: absolute;
  top: 4.215rem;
  left: 1.3125rem;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-around;
  width: 90%;
  height: 80rpx;
  margin: auto;
  background-color: #fff;
  border-radius: 45rpx;
  box-shadow: 0rpx 15rpx 22rpx -7rpx rgba(224, 236, 250, 0.82);

  input {
    width: 85%;
    height: 100%;
    color: #fff;
    border-radius: 45rpx;
  }
}

.logos {
  position: absolute;
  top: 40rpx;
  left: 35rpx;
  font-size: 34rpx;
  font-weight: medium;
  font-weight: 700;
  line-height: normal;
  color: rgba(255, 255, 255, 1);
  text-align: left;
  letter-spacing: 0rpx;
  opacity: 0.9000000357627869;
}

.Goge {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  height: 130rpx;
}

.wd-tabs__container {
  height: 600rpx;
}

.content {
  width: 95%;
  height: 600rpx;
  margin: 20rpx auto;
  border-bottom: 2rpx solid;

  .cells {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
}

.yhimg {
  width: 690rpx;
  margin: 15rpx auto;
  object-fit: scale-down;
  border-radius: 40rpx !important;
}

:deep(.wd-tabs__line[data-v-c72f40b5]) {
  position: absolute;
  bottom: 4px;
  left: 0;
  z-index: 1;
  width: var(--wot-tabs-nav-line-width, 19px);
  height: var(--wot-tabs-nav-line-height, 3px);
  background: var(--wot-tabs-nav-line-bg-color, var(--wot-color-theme, #2cb5a5));
  border-radius: calc(var(--wot-tabs-nav-line-height, 3px) / 2);
}

.cells {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  font-size: 26rpx;
  font-weight: regular;
  line-height: 38rpx;
  color: #3c3e42;
  text-align: center;
  letter-spacing: 0rpx;

  img {
    width: 44rpx;
    height: 52rpx;
  }
}
</style>
